<template>
  <div
    class="dragable"
    :draggable="dragable ? 'true' : 'false'"
    :class="{ active: always }"
    @drag="onDrag"
    @dragstart="onDragstart"
    @dragend="onDragend"
    @dragenter="onDragenter"
    @dragleave="onDragleave"
    @dragover="onDragover"
    @drop="onDrop"
  >
    <div class="drag-icon" v-if="dragable">
      <el-icon><Menu /></el-icon>
    </div>
    <div class="drag-menu">
      <el-dropdown trigger="click">
        <el-icon><Tools /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>布局调整</el-dropdown-item>
            <el-dropdown-item>背景色更换</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
interface Props {
  always?: boolean;
  dragable?: boolean;
  type?: string;
}

const {
  always = false,
  dragable = true,
  type = "containter",
} = defineProps<Props>();

defineOptions({
  name: "Dragable",
});

const onDrag = () => {
  console.log("drag");
};
const onDragstart = (event: DragEvent) => {
  console.log("dragstart");
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = "move";
  }
};

const onDragenter = () => {
  console.log("dragenter");
};
const onDragleave = () => {
  console.log("dragenter");
};

const onDragover = (event: DragEvent) => {
  console.log("dragover");
  event.preventDefault();
};
const onDragend = () => {
  console.log("dragend");
};
const onDrop = () => {
  console.log("drop");
};
</script>
<style lang="less" scoped>
.dragable {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid @primary-light;
  position: relative;
  &:hover,
  &.active {
    border-color: @primary;
  }
  .drag-menu {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
  .drag-icon {
    cursor: all-scroll;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
